<template>
  <div class="publish-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ breadTitle }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表单 -->
      <el-form
        :model="publishForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input style="width:400px" v-model="publishForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- <el-input type="textarea" v-model="publishForm.content"></el-input> -->
          <el-tiptap v-model="publishForm.content" lang="zh" placeholder="请填写文章内容…" :height="300" width="100%" :charCounterCount= 'false' :extensions="extensions"/>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="publishForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="publishForm.channel_id" placeholder="请选择">
            <el-option v-for="(item,index) in channels" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        
        <el-form-item>
          <el-button type="primary"  @click="onPublish('ruleForm')">发表</el-button
          >
          <el-button  @click="resetForm('ruleForm')">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getChannelsList } from '@/api/article/article.js'
import { publishArticle, getArticleDetail,updateArticle }  from '@/api/publish/publish.js'
import { ElementTiptap } from 'element-tiptap'
import 'element-ui/lib/theme-chalk/index.css';
// import element-tiptap 样式
import 'element-tiptap/lib/index.css';
import {
  // 需要的 extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  FontType,
  FontSize,
  TextColor,
  TextHighlight,
  Link,
  Image,
  CodeBlock
} from 'element-tiptap';
export default {
  name: "PublishIndex",
  components: {
    'el-tiptap': ElementTiptap
  },
  data() {
    return {
          publishForm: {
          title:null,
          channel_id: null,
          content: null,
          cover:{ 
              type: 0 , //// 封面
              images:[] //封面图片地址
          }, 
        },
        extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new TodoItem(),
        new TodoList(),
        new FontType(),
        new FontSize(),
        new TextColor(),
        new TextHighlight(),
        new Link(),
        new Image(),
        new CodeBlock()
      ],
        breadTitle: '发布文章',
        channels: [],
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
          ],
          channel_id: [
            { required: true, message: '请选择频道', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请填写内容', trigger: 'blur' }
          ]
   },
 }
},

  created (){
    if(this.$route.query.id){
      this.breadTitle = '修改文章'
      this.loadArticle()
    }
  },

  mounted(){
    this.getChannels()
  },
  methods: {
    onPublish(formName) {
        this.$refs[formName].validate( async (valid) => {
          if (valid) {
            if(this.$route.query.id){
              let id = this.$route.query.id
              const updateRes = await updateArticle(id, this.publishForm)
              if(updateRes){
                  this.$message.success('修改成功')
                  this.$router.push({name:'article'})
              }
            }else{
            const publishRes = await publishArticle(this.publishForm,false)
            if(publishRes.message === 'OK'){
                this.$message.success('发表成功')
                this.$router.push({name:'article'})
            }
           }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].validate( async (valid) => {
          if (valid) {
             if(this.$route.query.id){
              let id = this.$route.query.id
              const updateRes = await updateArticle(id, this.publishForm, true)
              if(updateRes){
                  this.$message.success('修改成功')
                  this.$router.push({name:'article'})
              }
            }else{
            const publishRes = await publishArticle(this.publishForm,true)
            if(publishRes.message === 'OK'){
                this.$message.success('存入草稿成功')
                this.$router.push({name:'article'})
            }
           }
          } else {
            return false;
          }
        });
      },
      //获取频道
      async getChannels (){
        const channelRes = await getChannelsList()
        console.log(channelRes);
        this.channels = channelRes.data.channels
      },
      // 修改文章：加载文章内容
      async loadArticle (){
        let id  = this.$route.query.id
        const articleDetail = await  getArticleDetail(id)
        this.publishForm = articleDetail.data
        console.log(articleDetail);
      }
    }

};
</script>

<style lang="less" scoped>
.el-tiptap-editor{
    border: 1px solid #000000;
    /deep/.el-tiptap-editor__menu-bar{
        border-bottom: 1px solid #000000;
    }
    /deep/.el-tiptap-editor__content {
        padding: 20px 20px;
        color: #000000;
    }
}
</style>